<template>
  <div id="div">
    this is demo template {{ version }} {{ childData }}
    <div title="attribute">
      key:确保元素的唯一性;
      key是给每一个【vnode】的唯一id，也是diff的一种优化策略，可以根据key，更准确，
      更快的找到对应的vnode节点
      <slot name="content" testProps="子组件的值"></slot>
    </div>
    <span>{{ attr }}</span>
    <button @click="startUpRocket">我要发射火箭</button>
  </div>
</template>

<script type="text/javascript">
console.info(
  "=========================================================================== 这是 demo 模板页面"
);
// 开源库：https://blog.csdn.net/badaaasss/article/details/86129393
// 总结：https://blog.csdn.net/zdy0_2004/article/details/78884415

export default {
  name: "demo",
  inheritAttrs: false,
  // 组件内路由
  beforeRouteEnter(to, from, next) {},
  beforeRouteUpdate(to, from, next) {},

  // 其他
  name: "app",

  //=========================================================================== DOM
  template: "",
  render(createElement, content) {
    console.log(content);
  },
  renderError(createElement) {},

  //=========================================================================== 资源

  // 包含Vue实例可用指令的哈希表
  directives: {},

  // 包含Vue实例可用过滤器的哈希表
  // 过滤器
  filters: {},

  // 包含Vue实例可用组件的哈希表
  components: {},

  //=========================================================================== 数据/选项
  props: {
    childData: {
      type: String,
      default: "默认值",
    },
    attr: {
      type: String,
      default: "$attr$listeners",
    },
  },
  data() {
    return {
      version: "1.0.0",
    };
  },
  computed: {
    versions() {},
  },
  watch: {},
  methods: {
    // $listeners
    startUpRocket() {
      this.$emit("upRocket");
      console.log("startUpRocket");
    },
  },

  //=========================================================================== 声明周期钩子
  // https://www.cnblogs.com/roy-dust/p/luoyichen.html
  // 实例刚在内存种创造出来，data 和 methods还没创造好
  beforeCreate() {
    // console.log(this.childData); // error
    // console.log(this.version); // undefined
  },
  // 实例已经在内存中创建OK，此时 data 和 methods 已经创建OK
  created() {
    // console.log(this.childData);    // 父组件
    // console.log(this.version);      // 1.0.0
  },

  // 此时已经完成了模板的编译，但是还没有挂载到页面中
  beforeMount() {},
  // 此时，已经将编译好的模板，挂载到了页面指定的容器中显示
  mounted() {
    console.warn(
      "=========================================================================== 这是 demo 模板页面"
    );
    const DIV = document.getElementById("div");
  },

  // 状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的
  beforeUpdate() {},
  // 实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新 界面已经被重新渲染好了！
  updated() {},

  activated() {},
  deactivated() {},

  //实例销毁之前调用。在这一步，实例仍然完全可用。
  beforeDestroy() {
    console.log(this.version + "demo组件销毁前");
  },

  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {
    console.log(this.version + "demo已经销毁");
  },
};
</script>
<style lang="less" scoped>
.scoped {
  color: red;
}
</style>